import React, {useEffect, useState} from 'react';
import PageHeader from "../components/PageHeader";
import {getIssueByPage} from "../api/issue";
import IssueItem from "../components/IssueItem";
import styles from '../css/Issue.module.css'
import {Pagination} from "antd";
import AddIssueBtn from "../components/AddIssueBtn";
import TypeSelect from "../components/TypeSelect";
import {useSelector} from "react-redux";

function Issues(props) {
    const [issueInfo, setIssueInfo] = useState([])
    const [pageInfo, setPageInfo] = useState({
        currentPage: 1, //当前页码
        pageSize: 5, // 每页数据量
        total: 0 // 数据的总条数
    })
    const {issueTypeId} = useSelector(state => state.type)
    useEffect(() => {
        async function fetchData() {
            let res = await getIssueByPage({
                currentPage: pageInfo.currentPage,
                pageSize: pageInfo.pageSize,
                issueStatus: true
            })
            if (issueTypeId !== 'all') {
                // 如果用户点击了非全部的tag 那么需要从全部中筛选出对应的tag
                res = await getIssueByPage({
                    currentPage: 1,
                    pageSize: pageInfo.pageSize,
                    issueStatus: true,
                    issueTypeId: issueTypeId
                })
            }
            setIssueInfo(res.data.data.data);
            setPageInfo({
                currentPage: res.data.data.currentPage,
                pageSize: res.data.data.pageSize,
                total: res.data.data.count
            })
        }

        fetchData()
    }, [pageInfo.currentPage, pageInfo.pageSize, issueTypeId]);
    let issueList = []
    for (let i = 0; i < issueInfo.length; i++) {
        issueList.push(<IssueItem key={i} issueInfo={issueInfo[i]}/>)
    }
    const pageChange = (page, pageSize) => {
        setPageInfo({
            ...pageSize,
            currentPage: page,
            pageSize: pageSize,
        })
    }
    return (
        <div className={styles.container}>
            {/*头部*/}
            <PageHeader title="问答列表">
                <TypeSelect/>
            </PageHeader>
            {/*列表内容区域*/}
            <div className={styles.issueContainer}>
                {/*左侧区域*/}
                <div className={styles.leftSide}>
                    {issueList}
                    {
                        issueInfo.length > 0 ? (
                            <div className={styles.paginationContainer}>
                                <Pagination onChange={pageChange} defaultCurrent={1} current={pageInfo.currentPage}
                                            pageSize={pageInfo.pageSize} total={pageInfo.total}/>
                            </div>
                        ) : (
                            <div>无内容</div>
                        )
                    }

                </div>
                {/*右侧区域*/}
                <div className={styles.rightSide}>
                    <div className={styles.addIssue}>
                        <AddIssueBtn/>
                    </div>
                </div>
            </div>

        </div>
    );
}

export default Issues;